<template>
  <el-card>
    <!-- 玩家列表 -->
    <div class="panel-area">
      <ul class="participants">
        <li v-for="item in nicknames" :key="item">
          <span>{{ item }} {{ item === nickname ? "（我）" : "" }}</span>
          <el-tag v-if="item === holder" size="mini">主持</el-tag>
        </li>
      </ul>
    </div>

    <!-- 按钮工具栏 -->
    <div class="panel-area button-area">
      <el-button
        v-if="!isGameStarted"
        type="primary"
        size="small"
        icon="el-icon-edit"
        @click="startGameHandler"
      >
        主持游戏
      </el-button>
      <el-button
        v-if="isGameStarted && nickname === holder"
        type="success"
        size="small"
        icon="el-icon-phone"
        @click="sendAdviceHandler"
      >
        提示
      </el-button>
      <el-button
        v-if="isGameStarted && nickname === holder"
        type="warning"
        size="small"
        icon="el-icon-delete"
        @click="stopGameHandler"
      >
        终止游戏
      </el-button>

      <el-button
        v-if="isGameStarted && nickname !== holder"
        type="success"
        size="small"
        icon="el-icon-magic-stick"
        @click="answerGameHandler"
      >
        猜答案
      </el-button>

      <el-button
        type="danger"
        size="small"
        icon="el-icon-switch-button"
        @click="exitGameHandler"
      >
        退出游戏
      </el-button>
    </div>

    <!-- 弹出框, 主持人 -->
    <el-dialog
      title="请设置答案"
      :visible.sync="resultDialogVisible"
      width="30%"
    >
      <el-input v-model="expectImageName" placeholder="请输入您的答案" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="resultDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveDialogHandler">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 弹出框, 答题人 -->
    <el-dialog
      title="请填写答案"
      :visible.sync="answerDialogVisible"
      width="30%"
    >
      <p>友情提示: 答案字数为 {{ answerCount }}</p>
      <el-input v-model="inputImageName" placeholder="请输入您的答案" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="answerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAnswerDialogHandler"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 弹出框, 发送提示 -->
    <el-dialog
      title="请输入提示"
      :visible.sync="adviceDialogVisible"
      width="30%"
    >
      <el-input v-model="advice" placeholder="请输入您的提示" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="adviceDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdviceHandler">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: "AppSidePanel",
  data() {
    return {
      resultDialogVisible: false,
      expectImageName: "",
      answerDialogVisible: false,
      inputImageName: "",
      adviceDialogVisible: false,
      advice: "",
    };
  },
  computed: {
    ...mapState(["nickname", "nicknames", "holder", "answerCount"]),
    ...mapGetters(["isGameStarted"]),
  },
  methods: {
    // 开始游戏
    startGameHandler() {
      this.resultDialogVisible = true;
      this.expectImageName = "";
    },
    // 终止游戏
    stopGameHandler() {
      this.$confirm("确定要终止游戏吗？", "温馨提示")
        .then(() => {
          // 发送游戏终止申请
          this.$store.dispatch("sendStopGame");
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 发送和提交提示信息
    sendAdviceHandler() {
      this.adviceDialogVisible = true;
      this.advice = "";
    },
    submitAdviceHandler() {
      if (!this.advice) {
        this.$message.error("提示信息不能为空！");
        return;
      }

      this.$store.dispatch("sendAdvice", this.advice);
      this.adviceDialogVisible = false;
    },
    // 猜答案
    answerGameHandler() {
      this.answerDialogVisible = true;
      this.inputImageName = "";
    },
    // 提交答案
    saveDialogHandler() {
      if (!this.expectImageName) {
        this.$message.error("答案不能为空！");
        return;
      }

      this.$store.dispatch("sendStartGame", this.expectImageName);
      this.resultDialogVisible = false;
    },
    saveAnswerDialogHandler() {
      if (!this.inputImageName) {
        this.$message.error("答案不能为空！");
        return;
      }

      this.$store.dispatch("sendAnswerGame", this.inputImageName);
      this.answerDialogVisible = false;
    },
    exitGameHandler() {
      this.$confirm("是否退出游戏", "温馨提示")
        .then(() => {
          this.$store.dispatch("sendUserLeave");
          this.$router.replace("/login");
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.panel-area {
  margin: 10px 0;
}
</style>